<template>
  <div>
  <el-form size="small" label-width="90px">
    <el-form-item label="设置">
      <div style="height:180px;overflow:auto">
        <div class="linkage-item"   v-for="(val, index) in resOptions" :key="index">
          <label class="linkage-label">选定要触发远程控制的接口：</label>
          <el-select v-model="val.interfaceKey" filterable placeholder="请选择接口" @change="setInterfaceKey(val.interfaceKey,index)">
              <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              >
              </el-option>
          </el-select>
          <div class="close-btn select-line-icon" @click="removeSelectItem(index)">
            <i class="el-icon-remove-outline" />
          </div>
        </div>   
      </div>
      <el-button style="padding-bottom: 0" icon="el-icon-circle-plus-outline" type="text" @click="addRemoteItem">
                添加列表
      </el-button>
      <el-button type="primary" @click="addWS" size="mini" style="margin-left:10px">新增接口</el-button>
    </el-form-item>
  </el-form>
   <!-- 添加或修改websocket通讯接口管理对话框 -->
    <el-dialog title="添加websocket通讯接口" :visible.sync="wsOpen" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="名称" prop="interfaceName">
          <el-input v-model="form.interfaceName" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="接口地址" prop="interfaceUrl">
          <el-input v-model="form.interfaceUrl" placeholder="请输入接口地址" />
        </el-form-item>
        <el-form-item label="token令牌">
          <el-input v-model="form.token" placeholder="请输入token令牌" />
        </el-form-item>
        <!-- <el-form-item label="键" prop="interfaceKey">
          <el-input v-model="form.interfaceKey" placeholder="请输入键" />
        </el-form-item> -->
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog> 
</div>
</template>

<script>
import { listSysWebsocket,addSysWebsocket} from "@/api/tool/SysWebsocket";

export default {
    props: ["remote"],
    created(){
        this.getOptions();
    },  
    data(){
      return{
        // keyValue:this.remote === undefined ? undefined : this.remote.interfaceKey,
        resOptions:this.remote === undefined ? [{interfaceKey:undefined,interfaceName:undefined,interfaceUrl:undefined,token:undefined }] : this.remote.interface,
        //选择框数据源
        options:[],
        //添加websocket接口弹出框
        wsOpen:false,
        // 表单参数
        form: {},
        // 表单校验
        rules: {}
      }
    },
    watch:{
        remote:{
            deep: true,
            handler(newVal){
                if(newVal === undefined){
                  this.resOptions = [{interfaceKey:undefined,interfaceName:undefined,interfaceUrl:undefined,token:undefined }];
                }else{
                  this.resOptions = newVal.interface;
                }
            }
        }
    },
    methods:{
        //获取websocket接口数据遍历创建options
        getOptions(){
            this.options = [];
            listSysWebsocket().then(response => {
                for(let res of response.rows){
                    this.options.push({
                        label:res.interfaceName,
                        value:res.interfaceKey,
                        url:res.interfaceUrl,
                        token:res.token,
                    })
                }
            })
        },
        //传选中的websocket的key
        setInterfaceKey(val,index){
          for(let item of this.options){
            if (item.value == val){ 
              this.resOptions[index].interfaceUrl = item.url,
              this.resOptions[index].interfaceName = item.label,
              this.resOptions[index].token = item.token
            }
          }
          let remote = {
            interface:this.resOptions
          }
          this.$emit("getRemote", remote); 
        },
        //添加远程控制接口
        addRemoteItem(){
          this.resOptions.push({
            interfaceKey:undefined,
            interfaceName:undefined,
            interfaceUrl:undefined,
            token:undefined,
          })
        },
        removeSelectItem(index){
          this.resOptions.splice(index, 1);
          let remote = {
            interface:this.resOptions
          }
          this.$emit("getRemote", remote); 
        },
        //新增websocket接口
        addWS(){
            this.wsOpen = true;
        },
        // 取消按钮
        cancel() {
            this.wsOpen = false;
            // this.reset();
        },
        //重置form
        reset(){
            this.form = {};
        },
        /** 提交按钮 */
        submitForm: function() {
        this.$refs["form"].validate(valid => {
            if (valid) {
                addSysWebsocket(this.form).then(response => {
                if (response.code === 200) {
                    this.msgSuccess("新增成功");
                    this.wsOpen = false;
                    this.getOptions();
                } else {
                    this.msgError(response.msg);
                }
                });
                }
            });
        },
    }
}
</script>

<style>
.linkage-label {
  font-size: 12px;
  color: #6e6e6e;
  display: inline-block;
  max-width: 100%;
  margin: 5px;
}
.linkage-item {
  border: 1px solid rgb(0, 132, 255);
  margin-bottom: 10px;
  padding: 10px;
  padding-bottom: 0px;
  display: inline-grid;
}
.select-line-icon {
  line-height: 32px;
  font-size: 22px;
  padding: 0 4px;
  color: #777;
}
.close-btn {
    cursor: pointer;
    color: #f56c6c;
  }
/**  滚动条凹槽的颜色，还可以设置边框属性  **/
::-webkit-scrollbar-track-piece { 

  background-color:#f8f8f8; 
  border-radius: 10px;
}
/** 滚动条的宽度  **/
::-webkit-scrollbar {

  width:9px;

  height:9px; 

}
  /** 滚动条的设置  **/
::-webkit-scrollbar-thumb {
  background-color:#dddddd;
  background-clip:padding-box;
  min-height:28px; 
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background-color:#bbb; 

}
</style>